<template>
	<view v-if="CategoryList.length == 0"></view>
	<view v-else>
		<u-tabs :list="CategoryList" :is-scroll="CategoryList.length > 5" :current="CategoryCurrent" @change="change"></u-tabs>

	<!-- 内容区域 -->
	<view class="content-area">
		<!-- 操作按钮 -->
		<view class="action-buttons">
			<u-button size="medium" type="primary" @click="showCreateCategoryModal">新增分类</u-button>
			<u-button size="medium" type="success" @click="showCreateScriptModal">新建话术</u-button>
		</view>

		<!-- 话术列表 -->
		<view class="script-list">
			<view
				v-for="script in scriptList"
				:key="script.script_id"
				:class="['script-item', { 'disabled': script.status.code === 2 }]"
			>
				<!-- 左边：话术内容 -->
				<view class="script-content">{{ script.content }}</view>
				<!-- 右边：操作按钮 -->
				<view class="script-actions">
					<u-button class="btn-copy" size="mini" type="success" @click="copyScript(script)">复制</u-button>
					<u-button class="btn-edit" size="mini" type="primary" @click="showEditModal(script)">编辑</u-button>
					<u-button  class="btn-delete" size="mini" type="error" @click="deleteScript(script)">删除</u-button>
				</view>
			</view>
		</view>

		<!-- 空数据提示 -->
		<view v-if="scriptList.length === 0" class="empty-tip">
			<text>暂无话术数据</text>
		</view>
	</view>
	</view>

	<!-- 编辑模态框 -->
	<u-modal :mask-close-able="true" v-model="editModalVisible" :content="'编辑话术'" @confirm="updateScript" @cancel="cancelEdit">
		<view class="modal-content">
			<u-input
				v-model="editContent"
				placeholder="请输入话术内容"
				class="edit-input"
			/>
		</view>
	</u-modal>

	<!-- 新建分类模态框 -->
	<u-modal :mask-close-able="true" v-model="createCategoryModalVisible" :content="'新建分类'" @confirm="createCategory" @cancel="cancelCreateCategory">
		<view class="modal-content">
			<u-input
				v-model="createCategoryName"
				placeholder="请输入分类名称"
				class="edit-input"
			/>
		</view>
	</u-modal>

	<!-- 新建话术模态框 -->
	<u-modal :mask-close-able="true" v-model="createScriptModalVisible" :content="'新建话术'" @confirm="createScript" @cancel="cancelCreateScript">
		<view class="modal-content">
			<u-input
				v-model="createScriptContent"
				placeholder="请输入话术内容"
				class="edit-input"
			/>
		</view>
	</u-modal>

	<u-toast ref="uToastRef" />

	<!-- 删除确认模态框 -->
	<u-modal v-model="deleteConfirmModalVisible" :title="'删除确认'" show-cancel-button :content="'此操作不可撤销，确定要删除吗？'" @confirm="confirmDelete" :mask-close-able="true">
	</u-modal>

	<u-top-tips ref="uTipsRef"></u-top-tips>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad,  onShow } from '@dcloudio/uni-app'
	import { deleteTopicScript, getScriptCategoryList, getTopicScriptList, updateTopicScript, createScriptCategory, createTopicScript } from '@/static/apis/wzry.js'
	// 标签列表
	const CategoryList = ref([])

	// 当前选中的标签索引
	const CategoryCurrent = ref(0)

	const uToastRef = ref()
	const uTipsRef = ref()

	// 话术列表
	const scriptList = ref([])

	// 编辑模态框相关
	const editModalVisible = ref(false)
	const currentScript = ref(null)
	const editContent = ref('')

	// 新建分类模态框相关
	const createCategoryModalVisible = ref(false)
	const createCategoryName = ref('')

	// 新建话术模态框相关
	const createScriptModalVisible = ref(false)
	const createScriptContent = ref('')

	// 删除确认模态框相关
	const deleteConfirmModalVisible = ref(false)
	const currentDeleteScript = ref(null)

	// 复制话术到剪贴板
	const copyScript = (script) => {
		console.log('复制话术:', script)
		uni.setClipboardData({
			data: script.content,
			showToast: false,
			success: () => {
				uToastRef.value.show({
					title: '复制成功',
		type: 'success',
				})
			}
		})
	}

	// 标签切换事件处理
	const change = (index) => {
		CategoryCurrent.value = index
		console.log("选择了", CategoryList.value[CategoryCurrent.value]);
		getScriptListByCategory()
		
	}

	// 页面加载时获取标签列表
	onLoad(async () => {
		// 获取分类列表
		const res = await getScriptCategoryList()
		console.log("话题库分类列表：", res);
		
		if (res.code === 0 && res.data.length > 0) {
			CategoryList.value = res.data;
			getScriptListByCategory()
		}else {
			uToastRef.value.show({
				title: '话题库是空的~',
				type: 'error',
			})
		}
	})

	// 显示编辑模态框
	const showEditModal = (script) => {
		console.log('显示编辑模态框:', script);
		
		currentScript.value = script
		editContent.value = script.content
		editModalVisible.value = true
	}

	// 取消编辑
	const cancelEdit = () => {
		editModalVisible.value = false
		currentScript.value = null
		editContent.value = ''
	}

	// 更新话术
	const updateScript = () => {
		if (currentScript.value) {
			updateTopicScript({
				topic_id:  currentScript.value.script_id,
				content: editContent.value
			}).then(res => {
uni.showToast({
				title:res.message,
				icon: 'success'
			})
			}).catch(err => {
				uni.showToast({
				title: err.message,
				icon: 'success'
			})
			}).finally(() => {
			getScriptListByCategory()

			})
		
			
			editModalVisible.value = false
			currentScript.value = null
			editContent.value = ''
		}
	}

	// 删除话术
	const deleteScript = (script) => {
		currentDeleteScript.value = script
		deleteConfirmModalVisible.value = true
	}

	// 确认删除
	const confirmDelete = () => {
		if (currentDeleteScript.value) {
			deleteTopicScript({script_id: currentDeleteScript.value.script_id}).then(res => {
				if(res.code == 0) {
					uToastRef.value.show({
						title: res.message,
						type: 'success',
					})
				}else {
					uToastRef.value.show({
						title: res.message,
						type: 'error',
					})
				}
			}).finally(() => {
				deleteConfirmModalVisible.value = false
				currentDeleteScript.value = null
				getScriptListByCategory()
			})
		}
	}

	// 取消删除
	const cancelDelete = () => {
		deleteConfirmModalVisible.value = false
		currentDeleteScript.value = null
	}

	// 显示新建分类模态框
	const showCreateCategoryModal = () => {
		createCategoryModalVisible.value = true
	}

	// 取消新建分类
	const cancelCreateCategory = () => {
		createCategoryModalVisible.value = false
		createCategoryName.value = ''
	}

	// 创建分类
	const createCategory = () => {
		if (!createCategoryName.value.trim()) {
			uni.showToast({
				title: '请输入分类名称',
				icon: 'error'
			})
			return
		}

		createScriptCategory({
			name: createCategoryName.value.trim()
		}).then(res => {
			uni.showToast({
				title: res.message,
				icon: 'success'
			})
			// 更新分类列表
			return getScriptCategoryList()
		}).then(res => {
			if (res.code === 0) {
				CategoryList.value = res.data;
				// 如果是第一个分类，自动切换到新分类
				if (CategoryList.value.length === 1) {
					CategoryCurrent.value = 0;
					getScriptListByCategory()
				}
			}
		}).finally(() => {
			createCategoryModalVisible.value = false
			createCategoryName.value = ''
		})
	}

	// 显示新建话术模态框
	const showCreateScriptModal = () => {
		if (CategoryList.value.length === 0) {
			uni.showToast({
				title: '请先创建分类',
				icon: 'error'
			})
			return
		}
		createScriptModalVisible.value = true
	}

	// 取消新建话术
	const cancelCreateScript = () => {
		createScriptModalVisible.value = false
		createScriptContent.value = ''
	}

	// 创建话术
	const createScript = () => {
		if (!createScriptContent.value.trim()) {
			uni.showToast({
				title: '请输入话术内容',
				icon: 'error'
			})
			return
		}

		createTopicScript({
			category_id: CategoryList.value[CategoryCurrent.value].category_id,
			content: createScriptContent.value.trim()
		}).then(res => {
			uni.showToast({
				title: res.message,
				icon: 'success'
			})
			// 更新话术列表
			return getScriptListByCategory()
		}).finally(() => {
			createScriptModalVisible.value = false
			createScriptContent.value = ''
		})
	}

	// 获取话术分类下的话术列表
	const getScriptListByCategory = () => {
		if(CategoryList.value.length == 0) {
uTipsRef.value.show({
			title: '没有话题分类',
			type: 'error',
			duration: '2300'
		})
		return
		}
		getTopicScriptList({
			category_id: CategoryList.value[CategoryCurrent.value].category_id
		}).then(res => {
			if (res.code === 0) {
				scriptList.value = res.data
			}
		})
	}

	</script>



<style scoped lang="scss">
	.content-area {
		padding: 16px;
	}

	.script-list {
		margin-bottom: 20px;
	}

	.script-item {
		background-color: #fff;
		border-radius: 12px;
		padding: 12px 16px;
		margin-bottom: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.script-item.disabled {
		opacity: 0.6;
	}

	.script-content {
		font-size: 16px;
		color: #333;
		flex: 1;
		margin-right: 16px;
		line-height: 1.5;
	}

	

	.script-actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
	}

	.action-buttons {
		display: flex;
		gap: 10px;
		margin-bottom: 16px;
	}

	.action-buttons button {
		padding: 8px 16px;
		font-size: 14px;
	}

	.btn-copy, .btn-edit, .btn-delete {
		width: auto;
		padding: 6px 12px;
		font-size: 12px;
	}

	.modal-content {
		padding: 20px;
	}

	.edit-input {
		padding: 20rpx;
	}

	.empty-tip {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #999;
		font-size: 14px;
	}
</style>
